<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
request.setAttribute("path", path);
%>
<!DOCTYPE HTML>
<html>
<head>
	<title>spring-mvc</title>
	<link type="text/css" href="${path }/resources/css/themes/base/minified/jquery-ui.min.css" rel="Stylesheet" />
	<script type="text/javascript" src="${path }/resources/js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="${path }/resources/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="${path }/resources/js/json2.js"></script>
	  <script>
	  $(function() {
	    $( "#tabs" ).tabs();
	    
	    $("a.textLink").click(function() {
	    	var link = $(this);
	    	$.ajax({
	    		url : link.attr("href"),
	    		dataType : "text",
	    		success : function(text) {
	    			MvcUtil.showSuccessResponse(text, link);
	    		},
	    		error : function(xhr) {
	    			
	    		}
	    	});
  			return false;
	    });

	    $("#byHeader").click(function() {
			  var link = $(this);
			  $.ajax({
				  url : link.attr("href"),
				  dataType : "text",
				  beforeSend : function(req) { req.setRequestHeader("FooHeader", "foo"); },
				  success : function(text) { MvcUtil.showSuccessResponse(text, link); }
			  });
			  return false;
		  });
	    
	    $("form.readJsonForm").submit(function() {
	    	var form = $(this);
	    	var button = form.children(":first");
	    	var data = form.hasClass("invalid") ? "{ 'foo' : 'bar' }" :"{ 'foo' : 'bar', 'fruit' : 'apple' }";
	    	$.ajax({
	    		type : "POST",
	    		url : form.attr("action"),
	    		contentType : "application/json",
	    		data : data,
	    		dataType : "text",
	    		success : function(text) { MvcUtil.showSuccessResponse(text, button); },
	    		error: function(xhr) { MvcUtil.showErrorResponse(xhr.responseText, button); }
	    	});
	    	return false;
	    });
	    
	    $("a.writeJsonLink").click(function() {
	    	var link = $(this);
	    	$.ajax({
	    		url : this.href,
	    		beforeSend : function(req) {
	    			if (!this.url.match(/\.json$/)) {
	    				req.setRequestHeader("Accept", "application/json");
	    			}
	    		},
	    		success : function(json) {
	    			MvcUtil.showSuccessResponse(JSON.stringify(json), link); 
	    		},
	    		error : function(xhr) {
	    			MvcUtil.showErrorResponse(xhr.responseText, link);
	    		}
	    	});
	    	return false;
	    });

	  });
	  
	  var MvcUtil = {};
	  MvcUtil.showResponse = function(type, text, element) {
		var responseElementId = element.attr("id") + "Response";
		var responseElement = $("#" + responseElementId);
		if (responseElement.length == 0) {
			responseElement = $("<span>").attr({id : responseElementId, class : type}).css("display", "none").text(text);
			responseElement.insertAfter(element);
		} else {
			responseElement.replaceWith($("<span>").attr({id : responseElementId, class : type}).css("display", "none").text(text));
			//after replace, responseElement doesn't automaticly refer to new element, so need to assign again
			responseElement = $("#" + responseElementId);
		}
		responseElement.fadeIn("slow");
	  };
	  MvcUtil.showSuccessResponse = function(text, element) {
		  MvcUtil.showResponse("success", text, element);
	  };
	MvcUtil.showErrorResponse = function showErrorResponse(text, element) {
		MvcUtil.showResponse("error", text, element);
	};
	  
	  var TestUtil = {};
	  // 测试showResponse
	  TestUtil.showResponse = function() {
		  MvcUtil.showResponse("success", "成功", $("#simpleLink"));
	  };
	  
	  </script>
</head>
<body>
<h1><a href="<c:url value="/" />">spring-mvc</a></h1>
<p>Recommended: Using a Web Developer tool such a Firebug to inspect the client/server interaction</p>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Simple</a></li>
    <li><a href="#tabs-2">Request Mapping</a></li>
    <li><a href="#tabs-3">Request Data</a></li>
  </ul>
  <div id="tabs-1">
    <ul>
    	<li>
    		<a href="${path }/simple" class="textLink" id="simpleLink">GET /simple</a>
    	</li>
    	<li>
    		<a id="simpleRevisited" class="textLink" href="${path }/simple/revisited">GET /simple/revisited</a>
    	</li>
    </ul>
    
    <input type="button" onclick="TestUtil.showResponse()" value="测试js"/>
  </div>
  <div id="tabs-2">
		<ul>
			<li>
				<a id="byPath" class="textLink" href="${path}/mapping/path">By path</a>
			</li>
			<li>
				<a id="byPathPattern" class="textLink" href="${path}/mapping/path/wildcard">By path pattern</a>
			</li>
			<li>
				<a id="byMethod" class="textLink" href="${path}/mapping/method">By path and method</a>
			</li>
			<li>
				<a id="byParameter" class="textLink" href="${path}/mapping/parameter?foo=bar">By path, method, and presence of parameter</a>
			</li>
			<li>
				<a id="byNotParameter" class="textLink" href="${path}/mapping/parameter">By path, method, and not presence of parameter</a>
			</li>
			<li>
				<a id="byHeader" href="${path}/mapping/header">By presence of header</a>
			</li>
			<li>
				<a id="byHeaderNegation" class="textLink" href="${path}/mapping/header">By absence of header</a>
			</li>
			<li>
				<form id="byConsumes" class="readJsonForm" action="${path}/mapping/consumes" method="post">
					<input id="byConsumesSubmit" type="submit" value="By consumes">
				</form>
			</li>
			<li>
				<a id="byProducesAcceptJson" class="writeJsonLink" href="${path}/mapping/produces">By produces via Accept=application/json</a>
			</li>
            <li>
                <a id="byProducesAcceptXml" class="writeXmlLink" href="${path}/mapping/produces">By produces via Accept=appilcation/xml</a>
            </li>
            <li>
              <a id="byProducesJsonExt" class="writeJsonLink" href="${path}/mapping/produces.json">By produces via ".json"</a>
            </li>
            <li>
                <a id="byProducesXmlExt" class="writeXmlLink" href="${path}/mapping/produces.xml">By produces via ".xml"</a>
            </li>
		</ul>
	  </div>
  <div id="tabs-3">
  		<ul>
  			<li>
  				<a id="param" class="textLink" href="${path}/data/param?foo=bar">Query parameter</a>
  			</li>
  		</ul>
  </div>
</div>
</body>
</html>